// 条件筛选
var stepsCondition = [
  { id: "1", name: "流程发起人" },
  { id: "1", name: "支行行长" },
  { id: "1", name: "网点员工" },
  { id: "1", name: "网点主任" },
  { id: "1", name: "支行本级员工" },
  { id: "1", name: "部门领导" },
  { id: "1", name: "部门员工" },
  { id: "1", name: "二级部门领导" }
];
var statusCondition = [
  { id: "2", name: "已创建" },
  { id: "2", name: "处理中" },
  { id: "2", name: "挂起" },
  { id: "2", name: "已完成" },
  { id: "2", name: "未知" },
  { id: "2", name: "已归档" }
];
function setCondition(className, addName, arr) {
  var dom = document.getElementsByClassName(className)[0];
  var str = "";
  for (var i = 0; i < arr.length; i++) {
    str +=
      '<span class="condition-name ' + addName + '">' + arr[i].name + "</span>";
  }
  dom.innerHTML = str;
}
setCondition("step-box", "step-name", stepsCondition);
setCondition("status-box", "status-name", statusCondition);

// 条件点击事件
function setConditionActive(className) {
  var dom = document.getElementsByClassName(className);
  for (var i = 0; i < dom.length; i++) {
    dom[i].index = i
    dom[i].onclick = function() {
      for (var n = 0; n < dom.length; n++) {
        dom[n].classList.remove("condition-active");
      }
      dom[this.index].classList.add("condition-active");
    };
  }
}
setConditionActive("step-name");
setConditionActive("status-name");

// 条件下拉事件
var showCondition = false;
var showBtn = document.getElementsByClassName("btns")[0];
var conditionBox = document.getElementsByClassName("condition")[0];
showBtn.onclick = function() {
  showCondition = !showCondition;
  showBtn.innerHTML = showCondition ? "分 类" : "筛 选";
  conditionBox.style.display = showCondition ? "block" : "none";
  tableConDom.style.height = winHeight - 150 - (showCondition ? 100 : 0) + "px";
};

var list = [
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  },
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  },
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  },
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  },
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  },
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  },
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  },
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  },
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  },
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  },
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  },
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  },
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  },
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  },
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  },
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  },
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  },
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  },
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  },
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  },
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  },
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  },
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  },
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  },
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  },
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  },
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  },
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  },
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  },
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  },
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  },
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  },
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  },
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  },
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  },
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  },
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  },
  {
    name: "关于2020春节信用卡营销",
    creater: "范小闲",
    createTime: "2020-01-02",
    currenter: "杨树林",
    finished: "未完成",
    finishTime: "2020-01-29",
    status: "处理中",
    step: "部门员工"
  }
];
// 表格分页
var pageSize = 15; // 每页展示条数
var currentPage = 1; // 当前页
var total = list.length; // 总条数
var paginationCount = Math.ceil(total / pageSize); // 分页数量
var paginationDom = document.getElementsByClassName("pagination-count")[0];
var tableConDom = document.getElementsByClassName("table-con")[0];
// 设置表格的最大高度
var winHeight =
  document.body.clientHeight || document.documentElement.clientHeight;
tableConDom.style.height = winHeight - 150 - (showCondition ? 100 : 0) + "px";
var paginationStr = "";
var paginationData = {};
for (var i = 0; i < paginationCount; i++) {
  paginationData[i + 1] = list.slice(i * pageSize, (i + 1) * pageSize);
  paginationStr += '<span class="pagination-item">' + (i + 1) + "</span>";
}
paginationDom.innerHTML = paginationStr;

// 分页点击事件
var paginationItems = document.getElementsByClassName("pagination-item");
for (var i = 0; i < paginationItems.length; i++) {
  paginationItems[i].index = i
  paginationItems[i].onclick = function() {
    currentPage = this.index + 1;
    initTableData(currentPage);
  };
}

// 下一页点击事件
var paginationNext = document.getElementsByClassName("pagination-next")[0];
paginationNext.onclick = function() {
  if (currentPage >= paginationCount) {
    return;
  }
  currentPage = currentPage + 1;
  initTableData(currentPage);
};

// 上一页点击事件
var paginationPre = document.getElementsByClassName("pagination-pre")[0];
paginationPre.onclick = function() {
  if (currentPage <= 1) {
    return;
  }
  currentPage = currentPage - 1;
  initTableData(currentPage);
};

// 输入页数跳转事件
var paginationInput = document.getElementsByClassName("pagination-input")[0];
paginationInput.onblur = function() {
  if (paginationInput.value === "") {
    return;
  }
  var value = paginationInput.value - 0;
  if (value > paginationCount || value < 1) {
    paginationInput.value = "";
    alert("您输入的页码已超过范围，请重新输入");
    return;
  }
  initTableData(value);
  paginationInput.value = "";
};

// 设置点击分页高亮
function paginationActive(currentPage) {
  for (var i = 0; i < paginationItems.length; i++) {
    paginationItems[i].classList.remove("pagination-active");
  }
  paginationItems[currentPage - 1].classList.add("pagination-active");
}

// 表格数据渲染
/**
 * @param {*} className 判断点击的是哪个dom节点
 * @param {*} type 0：升序、1：降序
 */
function initTableData(currentPage) {
  paginationActive(currentPage);
  var tableStr = "";
  var list = paginationData[currentPage];
  for (var i = 0; i < list.length; i++) {
    tableStr +=
      '<div class="table-item"><span class="table-span table-title">' +
      list[i].name +
      '</span><span class="table-span">' +
      list[i].creater +
      '</span><span class="table-span">' +
      list[i].createTime +
      '</span><span class="table-span">' +
      list[i].currenter +
      '</span><span class="table-span">' +
      list[i].finished +
      '</span><span class="table-span">' +
      list[i].finishTime +
      '</span><span class="table-span">' +
      list[i].status +
      '</span><span class="table-span">' +
      list[i].step +
      "</span></div>";
  }
  tableConDom.innerHTML = tableStr;
  // 判断表格是否有滚动条
  document.getElementsByClassName("table-head")[0].style[
    "padding-right"
  ] = hasScrolled(tableConDom, "vertical") ? "10px" : "0px";
}

// 初始化表格
initTableData(1);
